<template>
  <div class="box">
    <!--<template #slotName='scoped'></template>-->
    <ul>
      <li
        v-for="(item, i) in numberList"
        :key="i"
      >
        {{ item.join('+') }} =
        <input
          type="text"
          v-model="result[i]"
          :disabled="disableds[i]"
        />
        <button
          :disabled="disableds[i]"
          @click="
            () => {
              resultList.splice(i, 1, result[i])
              disableds[i] = true
            }
          "
        >
          确定
        </button>
      </li>
      <li>
        <span
          style="margin: 10px"
          v-for="(item, i) in renderResult"
          :key="i + 'result'"
        >
          {{ item }}
        </span>
      </li>
    </ul>
  </div>
</template>
<script>
export default {
  name: 'ComponentName',
  data() {
    return {
      resultList: ['', '', '', '', ''],
      numberList: [],
      result: ['', '', '', '', ''],
      disableds: [false, false, false, false, false],
    }
  },
  computed: {
    renderResult() {
      console.log(111)
      return this.resultList.map((el, i) => {
        if (!el) {
          return '未完成'
        } else {
          const result = eval(this.numberList[i].join('+'))
          if (+el === +result) {
            return '回答正确'
          } else {
            return '回答错误'
          }
        }
      })
    },
  },
  methods: {},
  components: {},
  filters: {},
  watch: {},
  created() {
    for (let i = 0; i < 5; i++) {
      this.numberList[i] = [
        Math.floor(Math.random() * 20) + 10,
        Math.floor(Math.random() * 20) + 10,
      ]
    }
  },
  mounted() {},
  activated() {},
  deactivated() {},
}
</script>
<style lang="less" scoped>
li {
  margin: 5px;
  input {
    padding-left: 10px;
    width: 40px;
    height: 20px;
    margin-right: 10px;
    background-color: rgba(0, 0, 0, 0.3);
    color: rgb(155, 255, 155);
    &:focus {
      color: rgb(155, 255, 155);
    }
  }
}
</style>
